<template>
	<view class="find" :style="{paddingTop:headHeight+'px'}"  >
		<myhead title="发布" :background="headBg"></myhead>
		<view class="form">
			<u-form class="uform" :model="form" ref="uForm" label-position="top" >
				<u-form-item label="面试题目" prop="name" class="form-item">
					<u-input v-model="form.name" placeholder="请输入" :border="true"/>
				</u-form-item>
				<u-form-item label="题目描述" prop="desc" class="form-item">
					<u-input v-model="form.desc" type="textarea"  placeholder="请输入" :border="true"/>
				</u-form-item>
				<u-form-item label="题目类型" prop="type" class="form-item">
					<u-input v-model="form.type" type="select" @click="tshow=true"  placeholder="请选择" :border="true"/>
				</u-form-item>
				<u-form-item label="题目难度" prop="level" class="form-item">
					<u-input v-model="form.level" type="select" @click="lshow=true"  placeholder="请选择" :border="true"/>
				</u-form-item>
				<u-form-item label="题目答案" prop="answer" class="form-item">
					<u-switch v-model="form.answer" active-value="1" inactive-value="0"></u-switch>
					<u-input v-model="form.content" v-if="form.answer" type="textarea"  placeholder="请输入答案" :border="true"/>
				</u-form-item>
			</u-form>
			<u-button @click="submit" class="submitbtn">提交</u-button>
		</view>
		<u-action-sheet :list="types" v-model="tshow" @click="chooseType"></u-action-sheet>
		<u-action-sheet :list="levels" v-model="lshow" @click="chooseLevel"></u-action-sheet>
		
		<u-modal
			v-model="show"
		 content="你尚未登录,暂不能提交面试题目"
		 title="登录提示"
		 @confirm="confirm"
		 confirm-color="#f50"
		 :show-cancel-button="true"
		 ></u-modal>
		 <u-toast ref="uToast" />
	</view>
	

</template>


<script>
	export default {
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data(){
			return {
				form:{
					answer:0 
				},
				show:false,
				tshow:false,
				lshow:false,
				types:[
					{text:"Vue"},
					{text:"React"},
					{text:"JavaScript"},
					{text:"小程序"},
					{text:"CSS样式"}
				],
				levels:[
					{text:"简单"},
					{text:"复杂"},
					{text:"变态难"},
					{text:"奇葩"}
				],
				rules:{
					name:[
						{
							required: true, 
							message: '请输入面试题目', 
							trigger: ['change','blur'],
						}
					],
					desc:[
						{
							required: true, 
							message: '请输入面试题目', 
							trigger: ['change','blur'],
						}
					],
					type:[
						{
							required: true, 
							message: '请选择类型', 
							trigger: ['change','blur'],
						}
					],
					level:[
						{
							required: true, 
							message: '请选择难度', 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		watch:{
			form:{
				deep:true,
				handler(v){
					
				}
			}
		},
		methods:{
			confirm(){
				uni.switchTab({
					url:'../mine/mine'
				})
			},
			chooseLevel(index){
				this.form = {
					...this.form,
					level:this.levels[index].text
				}
			},
			chooseType(value){
				console.log(value)
				this.form = {
					...this.form,
					type:this.types[value].text
				}
			},
			submit(){
				// 先判断是否登录 
				if(this.userInfo){
					this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
							var data = {
								userInfo:this.userInfo,
								...this.form,
								content:this.form.answer?this.form.content:'',  // 答案
								hot:this.form.answer ? 10 : 5  ,  // 人气
								like:0,
								shou:0,
								ping:0,
								plist:[],
								time:new Date()
							}
							uni.showLoading({
								title:"提交..."
							})
							console.log(valid)
							wx.cloud.database()
							.collection("wh2107timu")
							.add({
								data 
							})
							.then(res=>{
								console.log(res)
								uni.hideLoading();
								this.$refs.uToast.show({
									title: '题目发表成功',
									type: 'success',
								})
								this.$refs.uForm.resetFields()
								this.form = {
									name:"",
									desc:"",
									level:"",
									type:'',
									answer:0,
									content:""
								}
							})
							
							
						} else {
							console.log('验证失败');
						}
					});
				}else{
					// 提示 
					this.show = true;
				}
				
			}
		},
		mounted(){
			
		},
		onLoad(){
			console.log(this.hStyle)
		}
	}
</script>

<style lang="scss">
	.form{
		padding:30rpx;
		.uform{
			margin-bottom:40rpx;
		}
		.submitbtn{
			
		}
	}
</style>
